<script setup lang="ts">
import { useMenuStore, useTabStore, useUserStore, useConfigStore } from '@/stores'
import { useRouter } from 'vue-router'
// import { useUserStore } from '@/stores'

defineProps({
  avatar: {
    type: String,
    required: true
  }
})

const router = useRouter()
const userStore = useUserStore()
const menuStore = useMenuStore()
const tabStore = useTabStore()
const configStore = useConfigStore()

const logout = () => {
  userStore.$reset()
  menuStore.$reset()
  tabStore.$reset()
  configStore.$reset()
  router.replace({ name: 'login' })
}
</script>

<template>
  <el-dropdown trigger="click">
    <el-badge>
      <el-avatar :src="avatar" />
    </el-badge>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item class="flex-col">
          <el-text class="w-[150px] font-bold mb-2" truncated> 编程段子 </el-text>
          <el-row class="w-[150px]">
            <el-text truncated>lewo@bilibili.com</el-text>
          </el-row>
        </el-dropdown-item>
        <el-dropdown-item divided>主页</el-dropdown-item>
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item>设置</el-dropdown-item>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss"></style>
